<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
	.cars-box{
		width: auto;
		height:auto;
		background: #fff;
		border-radius:0.5rem;
		box-shadow:0 0 1px #bbb;
		position: relative;
		margin-top: 1rem;
		margin-bottom: 2rem;
		padding: 2rem 0 2rem 0;
	}
	.pad1{
		padding: 1rem;
	}
	.carsindex{
		display: block;
		width: 9rem;
		height:2rem;
		background:#549EFF;
		position: absolute;
		left: 50%;
		top: -1rem;
		border-radius: 10rem;
		margin-left: -4.5rem;
		text-align: center;
		line-height:2rem;
		color:#fff;
	}
	.carscounts{
		text-align: center;
		color: #ccc;
		font-size: 1.2rem;
	}
	.jlist-liicon{
		color: dodgerblue;
		text-align: right;
		width: 30px;
		line-height:1.5rem;
		font-size: 20px !important;
	}
</style>
</head>
<body>
<div id="jcontent" class="jcontent pad1">
	<div id="data-list"></div>
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">空空如也，没有找到数据</div>
	</div>
</div>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	//加载数据
	loadList();
	//车辆的点击
	mui('#jcontent').on('tap','.cars-box', function() {
		carDo(this.getAttribute("data-id"));
	});
});

//删除数据
function carDo(id){
	var btnArray = [{title:"查看该车辆预约记录"},{title:"删除该车辆"}];
	plus.nativeUI.actionSheet( {
		title:"操作",
		cancel:"取消",
		buttons:btnArray
	},function(e){
		if(e.index==1){
		}else if(e.index==2){
			plus.nativeUI.confirm( "删除后不能恢复，确认删除?", function(e){
				if(e.index==0){
					delCar(id);
				}
			}, "确认删除", ["是的","取消"] );
		}
	});
}

//删除我的车辆
function delCar(carId){
	webapp.ajax({
		url:"/carLife/admin/interface/carMessage/deleteMyCar",
		data:{
			carId:carId
		},
		success:function(json){
			if(json.code == '200'){
				mui.toast("删除成功！");
				//移除删除的那个dom
				var _ele=document.getElementById("car-"+carId);
				_ele.parentNode.removeChild(_ele); 
			}
		}
	});
}

//加载数据
function loadList(){
	webapp.ajax({
		url:"/carLife/admin/interface/carMessage/selectMyCars",
		success:function(json){
			var myExternal=document.getElementById("data-list");
			myExternal.innerHTML="";
			if(json.code == '200'){
				if(json.data.length>0){
					document.getElementById("nodatas").classList.add("hide");
					var html = template("dataList",json);
					myExternal.innerHTML=html;
				}
			}else{
				mui.toast(json.msg);
			}
		}
	});
}

//标题栏右边菜单的点击事件
window.addEventListener('riconClick',function(event){
	webapp.openByTpl2({
		title:"添加车辆",
		hrefs:"/tpl/addCar.html"
	})
});
//新增完车辆后，刷新
window.addEventListener("loadList", function(e) {
	loadList();
});

</script>
<script id="dataList" type="text/html">
{{each data as item i}}
	<div class="cars-box" id="car-{{item.id}}" data-id="{{item.id}}">
		<span class="carsindex">
			<i class="iconfont icon-cheliang"></i>&nbsp;&nbsp;{{item.licensePlate}}
		</span>
		<div class="cars-content">
			<ul class="jlist-ul">
			<li class="jlist-li line-b">
				<i class="jlist-liicon iconfont icon-pp"></i>
				<div class="jlist-li-label">车辆品牌</div>
				<div class="jlist-li-txt">{{item.carBrandName}}</div>
				<div class="jlist-li-ricon">
					<i class="iconfont icon-i6"></i>
				</div>
			</li>
			<li class="jlist-li line-b">
				<i class="jlist-liicon iconfont icon-xilie"></i>
				<div class="jlist-li-label">车辆系列</div>
				<div class="jlist-li-txt">{{item.carSeriesName}}</div>
				<div class="jlist-li-ricon">
					<i class="iconfont icon-i6"></i>
				</div>
			</li>
			<li class="jlist-li  line-b">
				<i class="jlist-liicon iconfont icon-leixing"></i>
				<div class="jlist-li-label">车辆型号</div>
				<div class="jlist-li-txt">{{item.carModelName}}</div>
				<div class="jlist-li-ricon">
					<i class="iconfont icon-i6"></i>
				</div>
			</li>
			<li data-title="车辆信息" data-url="/tpl/cheliang.html" class="jlist-li  line-b">
				<i class="jlist-liicon iconfont icon-cp"></i>
				<div class="jlist-li-label">车牌号码</div>
				<div class="jlist-li-txt">{{item.licensePlate}}</div>
				<div class="jlist-li-ricon">
					<i class="iconfont icon-i6"></i>
				</div>
			</li>
			<li class="jlist-li  line-b">
				<i class="jlist-liicon iconfont icon-riqi"></i>
				<div class="jlist-li-label">购买日期</div>
				<div class="jlist-li-txt">{{item.purchaseDateForamt}}</div>
				<div class="jlist-li-ricon">
					<i class="iconfont icon-i6"></i>
				</div>
			</li>
		</ul>
		</div>
	</div>
{{/each}}
</script>
</body>
</html>
